<template>
  <!-- 新增网络安全通报 -->
  <h-modal class="event-modal" v-model.lazy="show" title="新增网络安全通报" @submit="submit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="24">
          <a-form-model-item label="标题" prop="title">
            <a-input v-model.lazy="form.title" :maxLength="50" placeholder="标题"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="类型选择" prop="type">
            <a-radio-group buttonStyle="solid" v-model.lazy="form.type">
              <a-radio-button :value="0">市级</a-radio-button>
              <a-radio-button :value="1">省级</a-radio-button>
              <a-radio-button :value="2">中央</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="通报类型" prop="">
            <a-input v-model.lazy="form.source" :maxLength="50" placeholder="通报类型"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="发文单位" prop="company">
            <a-input v-model.lazy="form.company" placeholder="发文单位"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="事件发生单位" prop="">
            <a-input v-model.lazy="form.unity" placeholder="事件发生单位"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="权重选择" prop="weightType">
            <a-radio-group buttonStyle="solid" v-model.lazy="form.weightType">
              <a-radio-button :value="0">低</a-radio-button>
              <a-radio-button :value="1">中</a-radio-button>
              <a-radio-button :value="2">高</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>

        <!-- <a-col :span="24">
          <a-form-model-item label="通报内容" prop="content">
            <a-textarea v-model.lazy="form.content" placeholder="请输入通报内容" :rows="3"></a-textarea>
          </a-form-model-item>
        </a-col> -->

        <a-col :span="24">
          <a-form-model-item label="通报内容" >
            <Editor v-if="showEditor" @getContent="getImg" />
            <!-- <UploadImageMutil type="drag" :length="100" ref="image" @getUrl="getImg" /> -->
          </a-form-model-item>

        </a-col>

      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { deptList } from '@/api/dept';
import { addSafeIntnet, editSafeIntnet } from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';
import UploadImageMutil from '@/components/UploadImageMutil';
import Editor from '@/components/Editor/Editor.vue';

import { v4 } from 'uuid';

const defaultForm = {
  type: 0,
  weightType: 0,
  file: ''
};

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  components: {
    UploadImageMutil,
    Editor
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          this.showEditor = true;
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    },
    dept(val) {
      this.form.departIdList = val.join(',');
    }
  },
  data() {
    return {
      moment,
      type: 'add',
      show: false,
      deptArr: [],
      showEditor: true,
      dept: [],
      form: cloneDeep(defaultForm),
      rules: {
        content: [{ required: true, message: '请输入' }],
        title: [{ required: true, message: '请输入' }],
        type: [{ required: true, message: '请输入' }],
        weightType: [{ required: true, message: '请输入' }],
        company: [{ required: true, message: '请输入' }]
      }
    };
  },
  created() {
    deptList({
      pageNo: 1,
      pageSize: 1000
    }).then(res => {
      this.deptArr = res.data.records.map(e => {
        return {
          label: e.depart,
          value: e.id
        };
      });
    });
  },
  methods: {
    edit(form) {
      this.type = 'edit';
      this.form = form;
      const file = form.file;
      // console.log(file)
      if (file) {
        this.$nextTick(() => {
          console.log(this.$refs.image);
          this.$refs.image.setURL(file.split(',').map(e => {
            return {
              url: e,
              name: e,
              uid: v4(),
              status: 'done',
              response: {
                data: {
                  imgUrl: e,
                  name: e
                }
              }
            };
          }));
        });
      }
    },
    add() {
      this.type = 'add';
      this.form = cloneDeep(defaultForm);
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            addSafeIntnet(this.form).then(res => {
            this.$message.success('创建成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep(defaultForm);
            this.showEditor = false;
          });
          } else if (this.type == 'edit') {
            editSafeIntnet(this.form).then(res => {
            this.$message.success('修改成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep(defaultForm);
            this.showEditor = false;
          });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getImg(content) {
      console.log(content, 'imgggg');
      // const file = img.map(e => e.imgUrl).join(',');
      this.form.content = content.content;
    }
  }
};
</script>

<style>

</style>
